<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no" />
		<title>愉直播</title>
		<link rel="stylesheet" type="text/css" href="../c/aui.css" />
		<link rel="stylesheet" type="text/css" href="../c/animate.css" />
		<link rel="stylesheet" type="text/css" href="../c/aui_flex.css" />
		<style>
      html,body {
        background-color: transparent !important;
      }
			.t{
				position: fixed;
				z-index: 99999;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 0;
				background: #222;
				opacity: 0.3

			}
			.sx-fenxiang-info{
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				z-index: 1;

			}
			.sx-fenxiang-info .aui-ellipsis-1 {
				text-align: center;
			}
			.slide {
				background: none;
				overflow: hidden;
				/*overflow-x: scroll;*/
				-webkit-overflow-scrolling: touch;
				/*white-space: nowrap;*/
				padding: 0.75rem;
				padding-bottom: 1rem;
				position: relative;
        background:#1E1C20;
				display:table;
				table-layout:fixed;
				width: 100%;
			}
			.slide .swiper-slide {
				display: table-cell;
				position: relative;
		    text-align: center;
		    vertical-align: middle;
		    padding: 0.75rem 0;
				width: 25%;
				float: left;
			}
			.swiper-slide img {
				width: 2.5rem;
				margin: 0 auto;
				padding-bottom: 0.3rem;
			}
			.slide .swiper-slide p {
				font-size: 0.7rem;
			}
			.dels{
				text-align: center;
				font-size: 0.85rem;
				color: #fff;
				padding: 1rem 0;
				background: #2B292B;
			}
			.asdasd{
				border-top-left-radius:0.5rem;
				border-top-right-radius:0.5rem;
				border-bottom: 0.05rem solid #2B292B;
				padding-top: 1rem;
			}
			.xiamian,.xiamian div{

			}
      .xiamian img{
        opacity: 0.7
      }
			.bounceInUp{
				animation-duration: 0.8s;
				animation-fill-mode: both;
			}
			.fadeInUp1{
				/*animation-delay:0.3s;*/
			}
			.fadeInUp2{
				animation-delay:0.1s;
			}
			.fadeInUp3{
				animation-delay:0.15s;
			}
			.fadeInUp4{
				animation-delay:0.2s;
			}
			.fadeInUp5{
				animation-delay:0.25s;
			}
			.fadeInUp6{
				animation-delay:0.3s;
			}
			.fadeInUp7{
				animation-delay:0.35s;
			}
			.fadeInUp8{
				animation-delay:0.4s;
			}
			.fadeInUp9{
				animation-delay:0.45s;
			}
			.fadeInUp10{
				animation-delay:0.5s;
			}
			/*.fadeInUp{
				animation-duration: 0.3s;
				animation-fill-mode: both;
			}
			.fadeInUp1{
				animation-delay:0.3s;
			}
			.fadeInUp2{
				animation-delay:0.4s;
			}
			.fadeInUp3{
				animation-delay:0.5s;
			}
			.fadeInUp4{
				animation-delay:0.6s;
			}
			.fadeInUp5{
				animation-delay:0.7s;
			}
			.fadeInUp6{
				animation-delay:0.8s;
			}
			.fadeInUp7{
				animation-delay:0.9s;
			}*/

	  #canvas-box {
		  position: fixed;
		  top: -200%;
		  width: 100%;
	  }

	  .goods-title {
		  height: 3rem;
		  line-height: 1.5rem;
		  overflow: hidden;
	  }

	  .row-list {
		  height: 7rem;
	  }
		</style>
	</head>
	<body>
	<section class="" id="canvas-box">
		<img class="canvas-img" src=""  style="width:100%">
		<div class="aui-row aui-padded-10">
			<div class="aui-col-xs-5 row-list">
				<div>
					<img class="qrcode-img" src="" style="margin:auto;" />
				</div>
				<div class="aui-font-size-12 aui-text-center">长按识别二维码</div>
			</div>
		</div>
	</section>
		<div class="t"  tapmode onclick="c()"></div>
		<div class="sx-fenxiang-info">
			<div class="slide asdasd">
				<div class="swiper-slide fadeInUp1 bounceInUp" tapmode onclick="_weixin('session')">
					<img src="../i/share/session.png" />
					<p class="aui-ellipsis-1">
						微信
					</p>
				</div>
				<div class="swiper-slide fadeInUp2 bounceInUp" tapmode onclick="_weixin('timeline')">
					<img src="../i/share/timeline.png" />
					<p class="aui-ellipsis-1">
						朋友圈
					</p>
				</div>
        <div class="swiper-slide fadeInUp3 bounceInUp" tapmode onclick="_qq('QFriend')">
					<img src="../i/share/QFriend.png" />
					<p class="aui-ellipsis-1">
						QQ
					</p>
				</div>
				<div class="swiper-slide fadeInUp4 bounceInUp" tapmode onclick="_qq('QZone')">
					<img src="../i/share/QZone.png" />
					<p class="aui-ellipsis-1">
						QQ空间
					</p>
				</div>
        <div class="swiper-slide fadeInUp5 bounceInUp" tapmode onclick="_qq('weibo')">
					<img src="../i/share/weibo.png" />
					<p class="aui-ellipsis-1">
						微博
					</p>
				</div>
				<div class="swiper-slide fadeInUp6 bounceInUp" tapmode onclick="fuzhi()">
					<img src="../i/share/url.png" />
					<p class="aui-ellipsis-1">
						复制链接
					</p>
				</div>
				<div class="swiper-slide fadeInUp7 bounceInUp" tapmode onclick="sharePic()">
					<img src="../i/share/share_btn.png" />
					<p class="aui-ellipsis-1">
						生成海报
					</p>
				</div>
				<div class="swiper-slide fadeInUp7 bounceInUp" tapmode onclick="sharedModule()">
					<img src="../i/share/shared.png" />
					<p class="aui-ellipsis-1">
						更多分享
					</p>
				</div>

			</div>

			<div class="dels" tapmode onclick="c()">
				取消
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../j/api.js"></script>
	<script type="text/javascript" src="../j/html2canvas.min.js"></script>
	<script type="text/javascript" src="../j/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		var a,_name,_frameName=''
		var clipBoard, userInfo;
		var iosImages = [];
		var imgUrl = '../i/share/share.png';
function urlsa() {
		var imglen = $("img").length;
		var picurlwa = picurl + "/share";
		for (var i = 0; i < imglen; i++) {
			var tpl = $("img").eq(i).attr("src");
			tplaas = tpl.replace("../i/share", picurlwa);
			$("img").eq(i).attr("src", tplaas);	
		
	}
	}
		apiready = function() {
			urlsa();
			_user = _getPrefs('_user');
			$api.fixTabBar($api.dom('.dels'))
			api.parseTapmode();
			a = _getPrefs('_config').config;
			a.content = a.yaoqing_content;
			a.title = a.yaoqing_title;
			a.img = '../i/logo.png';
			a.url = _sx_gurl + 'index.php/index/m/yaoqing/uid/'+_user.id;
		}
		function c(){
			api.closeFrame();
		}
		// 微信分享
		// type session（会话） timeline（朋友圈） favorite（收藏）
		function _weixin(type,data) {
			var wx = api.require('wxPlus');
			wx.shareWebpage({
				scene : type,
				title : a.title,
				description : a.content,
				thumb : a.img,
				contentUrl : a.url
			}, function(ret, err) {
				if (ret.status) {
				}
			});
		}
		// QQ分享
		// type 分享内容到好友或空间，取值范围：QZone、QFriend
		function _qq(type,data){
			var QQPlus = api.require('QQPlus');
			QQPlus.shareNews({
				url : a.url,
				title : a.title,
				description : a.content,
				imgUrl : a.img,
				type : type,
			}, function(ret, err) {
				if (ret.status) {
				}
			});
		}
		// 复制
		function fuzhi(){
			var clipBoard = api.require('clipBoard');
			clipBoard.set({
				value : (a.title?a.title:'')+"\r\n"+(a.content?a.content:'') +"\r\n"+ a.url
			}, function(ret, err) {
				if (ret) {
					_msg("复制成功，快把链接分享给朋友们吧")
				}
			});
		}
		function sharedModule(){
			var sharedModule = api.require('shareAction');
			sharedModule.share({
			    text: a.title+" "+ a.url,
			    type: 'url',
			    path:a.url,
			    images:a.img,
			    thumbnail:a.img,
			});
		}

		function sharePic(){
            qrcode()
		}

		function qrcode() {
			var FNScanner = api.require('FNScanner');
			var content = a.url;
			FNScanner.encodeImg({
				content: content,
				saveToAlbum: false,
				saveImg: {
					path: 'fs://qrcode' + Math.floor((Math.random() * 100) + 1) + 'share.png',
					w: 130,
					h: 130
				}
			}, function(ret, err) {
				// alert($api.jsonToStr(ret))

				if (ret.status) {
                    api.pageParam['code_url'] =  ret.imgPath
                    api.openFrame({
                        name : 'member_yaoqing_poster',
                        url : _h_w + 'member_yaoqing_poster.html',
                        rect : {
                            x : 0,
                            y : 0,
                            w : 'auto',
                            h : 'auto',
                        },
                        bgColor : 'rgba(0,0,0,0)',
                        animation:{
                            type:"none",                //动画类型（详见动画类型常量）
                            // subType:"from_bottom",       //动画子类型（详见动画子类型常量）
                            // duration:300
                        },
                        pageParam:api.pageParam,
                    })

				} else {
					// alert(JSON.stringify(err));
				}
			});
		}

	</script>
</html>
